import { useRef ,useEffect} from "react";
import { Button } from "antd";
import { useNavigate } from "react-router-dom";
const Text2 = () => {
    const canvas = useRef(null);
    const video = useRef(null);
    const navigate = useNavigate();
    let ctx = null;
    
    useEffect(()=>{
        ctx = canvas.current.getContext('2d');
        // ctx.scale(.5,1)
        // ctx.translate(250,250)
        // //旋转
        // ctx.rotate(Math.PI/3)
        // ctx.beginPath()
        //transform位移，x轴xy，y轴xy，x轴移动，y轴移动
        // ctx.transform(-1,0,0,1,300,100)
        // ctx.fillRect(0,0,200,100)
        // ctx.moveTo(100,100)
        // ctx.lineTo(200,100)
        // ctx.moveTo(100,100)
        // ctx.lineTo(100,200)
        // ctx.stroke()
        // ctx.font = '20px Microsoft YaHei'
        // ctx.fillText('x(1,0)',220,105)
        // ctx.fillText('y(0,1)',95,220)   
        // ctx.closePath()
    },[])
    let isOpen = false;
    const reder = ()=>{
        if(!isOpen){
            return;
        }
        console.log(1);
        ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
        ctx.drawImage(video.current,0,0,ctx.canvas.width,ctx.canvas.height);//绘制视频,起始点,宽高
        requestAnimationFrame(reder)
    }
    const open = ()=>{
        if(video.current.paused){
            video.current.play()
            isOpen = true;
        }else{
            video.current.pause()
            isOpen = false;
        }
        console.log(video.current.duration);
        reder()
    }
    const videoEnd = ()=>{
        isOpen = false;
    }
    return (<div>
        <canvas width={600} height={600} ref={canvas}/>
        <video src="/video/1.mp4" ref={video} hidden onEnded={videoEnd}></video>
        <Button type="primary" onClick={open}  >播放/暂停</Button>
        <Button type="primary" onClick={()=>navigate('/text3')}  >跳转</Button>
    </div>)
}
export default Text2;